import React from 'react'
import {connect} from 'react-redux'
import { Table, Button, message, Spin, Popover, Popconfirm } from 'antd';
import {messages} from "share/common";
import SlideFrame from 'components/slide-frame';
import credentialService from "containers/financial-account/credential-definition/credential-definition-service";
import rowRule from "containers/financial-account/credential-definition/row-rule";

class rowStyle extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      infoData: {},
      dataList: [],
      columns: [
        {title: messages('financial-account.key137')/*核算场景*/, dataIndex: 'sceneName', render: value => <Popover content={value} placement={'topLeft'}>{value}</Popover>},
        {title: messages('common.sequence')/*序号*/, dataIndex: 'sequence', width: 65}
      ],
      loading: false,
      page: 0,
      data: [],
      tableLoading: false,
      pagination: {
        total: 0
      },
      title: messages('financial-account.key139')/*新建凭证模板定义*/,
      editRecord: {},
      showSlideFrame: false
    }
  }

  componentDidMount() {
    this.setState({infoData: this.props.infoData, loading: true},() => {
      const { columns, infoData } = this.state;
      credentialService.getTableList(infoData.setOfBooksId).then(res => {
        res.data.map((item,index) => {
          columns.push({title: item.ledgerName,dataIndex: `arg${index}`, width: '10%', render: (value,record) => record.journalLineTemplateDetails[index] ? record.journalLineTemplateDetails[index].cellComment : ''});
        });
        columns.push({title: messages('common.operation')/*操作*/, dataIndex: 'operator', fixed: 'right', width: 120, render: (value,record) => {return <span>
              <a onClick={e => this.handleEdit(e,record)}>{messages('common.edit')/*编辑*/}</a>
              <span className="ant-divider"/>
              <Popconfirm onConfirm={e => this.handleDelete(e,record)}
                        title={messages('financial-account.key192')/*是否确认删除当前行信息*/}>
                <a>{messages('common.delete')/*删除*/}</a>
              </Popconfirm>
            </span>;}});
        this.setState({columns, loading: false},() => {
          this.getList();
        })
      }).catch(e => {
        this.setState({loading: false});
        message.error(e.response.data.message);
      });
    });
  }

  getList = () => {
    const { infoData, page } = this.state;
    let params = {
      page: page,
      templateId: infoData.id
    };
    this.setState({tableLoading: true});
    credentialService.getRowTable(params).then(res => {
      this.setState({
        tableLoading: false,
        data: res.data.rows,
        pagination: {
          total: Number(res.data.total),
          current: page + 1,
          onChange: this.onChangePager
        }
      });
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({tableLoading: false});
    });
  };

  onChangePager = (page) => {
    if (page - 1 !== this.state.page)
      this.setState({
        page: page - 1
      }, () => {
        this.getList();
      })
  };

  handleEdit = (e,record) => {
    e.stopPropagation();
    this.setState({
      title: messages('financial-account.key140')/*编辑凭证模板定义*/,
      editRecord: record
    },() => {
      this.setState({showSlideFrame: true});
    })
  };

  handleDelete = (e,record) => {
    e.stopPropagation();
    credentialService.deleteRowStyle(record.id).then(() => {
      message.success(messages('common.delete.successful')/*删除成功*/);
      this.getList();
    }).catch(e => {
      message.error(e.response.data.message);
    })
  };

  handleNew = () => {
    this.setState({
      title: messages('financial-account.key139')/*新建凭证模板定义*/,
      editRecord: {}
    },() => {
      this.setState({showSlideFrame: true});
    })
  };

  isRefresh = (isRefresh) => {
    this.setState({showSlideFrame: false});
    isRefresh === true && this.getList();
  };

  render(){
    const { loading, tableLoading, data, pagination, columns, title, editRecord, showSlideFrame, infoData } = this.state;
    return(
      <Spin spinning={loading}>
        <div style={{marginBottom: '10px'}}><Button onClick={this.handleNew} type='primary'>{messages('common.create')/*新建*/}</Button></div>
        <Table loading={tableLoading}
               dataSource={data}
               pagination={pagination}
               bordered
               scroll={{x:true}}
               columns={columns}
               rowKey={'id'}/>
        <SlideFrame show={showSlideFrame}
                    title={title}
                    params={{
                      showSlideFrame,
                      editRecord,
                      infoData
                    }}
                    content={rowRule}
                    onClose={(isRefresh) => this.isRefresh(isRefresh)}
                    afterClose={(isRefresh) => this.isRefresh(isRefresh)}/>
      </Spin>
    )
  }
}

function mapStateToProps(state){
  return {

  }
}

rowStyle.propTypes = {
  infoData: React.PropTypes.object.isRequired
};

rowStyle.defaultProps = {
  infoData: {}
};

export default connect(mapStateToProps)(rowStyle);
